<template>
  <div class="ai-compare-container" :style="{ background: backgroundStyle }">
    <!-- 侧边菜单组件 -->
    <SideMenu 
      :title="menuTitle" 
      :helpText="menuHelpText"
      :menuItems="menuItems"
      :isCollapsed="isMenuCollapsed"
      :currentItem="currentItem"
      @toggle-collapse="toggleCollapse"
      @select-item="selectMenuItem"
    />
    
    <!-- iframe 查看器组件 -->
    <IframeViewer :url="currentUrl" />
  </div>
</template>

<script setup>
import { computed, onMounted } from 'vue';
import SideMenu from './components/SideMenu.vue';
import IframeViewer from './components/IframeViewer.vue';
import { useMenu } from './composables/useMenu';
import './styles/index.css';

// 使用菜单状态管理
const {
  menuTitle,
  menuHelpText,
  menuItems,
  isMenuCollapsed,
  currentUrl,
  loadMenuItems,
  toggleCollapse,
  selectMenuItem,
  currentItem
} = useMenu();

// 背景样式 - 使用渐变创建清新背景
const backgroundStyle = computed(() => {
  return 'linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%)';
});

// 组件挂载时加载菜单数据
onMounted(async () => {
  try {
    await loadMenuItems();
  } catch (error) {
    console.error('初始化菜单失败:', error);
  }
});
</script>

<style scoped>
.ai-compare-container {
  display: flex;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
}
</style>